<template>
  <div class="publish">
    <form action="">
      <!-- 标题 -->
      <div class="title">
        <van-icon name="arrow-left" @click="$router.back()" />
        <p>发布房源</p>
      </div>
      <!-- 主题内容 -->
      <div class="main">
        <div class="info areaName">房源信息</div>
        <div class="areaName">
          <div class="name">小区名称</div>

          <div
            class="input"
            @click="$router.push('/rent/search')"
            v-if="$route.params.communityName"
          >
            {{ $route.params.communityName }}
            <van-icon name="arrow" />
          </div>

          <div class="input" @click="$router.push('/rent/search')" v-else>
            请输入小区名称<van-icon name="arrow" />
          </div>
        </div>
        <div class="areaName">
          <div class="price">
            租&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金
          </div>
          <input
            type="number"
            placeholder="请输入租金/月"
            v-model="sendHouseInfo.price"
          />
          <span class="input">￥/月</span>
        </div>
        <div class="areaName">
          <div class="price">
            面&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;积
          </div>
          <input
            type="number"
            placeholder="请输入建筑面积"
            v-model="sendHouseInfo.size"
          />
          <span class="input">&nbsp;&nbsp;&nbsp;&nbsp;m²</span>
        </div>
        <div class="areaName">
          <div class="name">户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型</div>
          <div
            class="input"
            @click="selectPop(condition.roomType)"
            v-if="!roomTypeName"
          >
            请选择<van-icon name="arrow" />
          </div>
          <div class="input" @click="selectPop(condition.roomType)" v-else>
            {{ roomTypeName }}<van-icon name="arrow" />
          </div>
        </div>
        <div class="areaName">
          <div class="name">所在楼层</div>
          <div
            class="input"
            @click="selectPop(condition.floor)"
            v-if="!floorName"
          >
            请选择<van-icon name="arrow" />
          </div>
          <div class="input" @click="selectPop(condition.floor)" v-else>
            {{ floorName }}<van-icon name="arrow" />
          </div>
        </div>
        <div class="areaName direction">
          <div class="name">朝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向</div>
          <div
            class="input"
            @click="selectPop(condition.oriented)"
            v-if="!orientedName"
          >
            请选择<van-icon name="arrow" />
          </div>
          <div class="input" @click="selectPop(condition.oriented)" v-else>
            {{ orientedName }}<van-icon name="arrow" />
          </div>
        </div>
        <div class="housetitle">房屋标题</div>
        <input
          type="text"
          placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
          v-model="sendHouseInfo.title"
          class="titleInput housetitle"
        />
        <div class="housetitle">房屋图像</div>
        <van-uploader v-model="imgsList" multiple>
          <van-button plain icon="plus"></van-button>
        </van-uploader>
        <div class="housetitle">房屋配置</div>
        <div class="more">
          <div
            :class="[
              'iconfontName ',
              selectOpions.includes(option.label) ? 'active' : '',
            ]"
            v-for="(option, index) in condition.supporting"
            :key="index"
            @click="selectOption(option)"
          >
            <span :class="`iconfont icon-${option.py}`"></span>
            <p>{{ option.label }}</p>
          </div>
        </div>
        <div class="housetitle">房屋描述</div>
        <textarea
          rows="8"
          placeholder="请输入房屋描述信息"
          v-model="sendHouseInfo.description"
        />
        <!-- 弹框区 -->
        <van-popup
          v-model="isShow"
          position="bottom"
          :style="{ height: '45%' }"
        >
          <van-picker
            :columns="selectPicker"
            value-key="label"
            autosize
            show-toolbar
            toolbar-position="top"
            @confirm="confirmPicker"
            @cancel="isShow = false"
            ref="rendArea"
          >
          </van-picker>
        </van-popup>
      </div>
      <!-- 确认与取消 -->
      <div class="eareConfirm">
        <button class="concel">取消</button
        ><button class="confirm" @click="confirmAdd">确认</button>
      </div>
    </form>
  </div>
</template>

<script>
import { publishConditionAPI, uploadImgsAPI, publishHouseAPI } from '@/api'
export default {
  name: 'Add',
  data() {
    return {
      // 弹框
      isShow: false,
      // 获取发布房屋的条件收集
      condition: {},
      // 更多功能的icon图标
      iconName: [
        'dianshiji',
        'bingxiang',
        'xiyiji',
        'kongtiao',
        'reshuiqi',
        'chuang',
        'mingzhuangnuanqi',
        'kuandai',
        'yigui',
        'meiqitianranqi'
      ],
      // 发布房屋的条件汇总
      sendHouseInfo: {
        title: '',
        description: '',
        houseImg: '',
        oriented: '',
        // 选中的配置
        supporting: '',
        // 租金
        price: '',
        roomType: '',
        // 面积
        size: '',
        floor: '',
        // 小区名称码
        community: ''
      },
      // 选择楼层\户型\朝向
      selectPicker: [],
      // 选中的配置
      selectOpions: [],
      // 上传图像的数组
      imgsList: [],
      // 楼层
      floorName: '',
      // 户型
      roomTypeName: '',
      // 朝向
      orientedName: ''
    }
  },
  created() {
    this.getPublishInfo()
    this.sendHouseInfo.community = this.$route.params.community
  },
  methods: {
    async getPublishInfo() {
      const res = await publishConditionAPI()
      this.condition = res.data.body
      this.condition.supporting.forEach((sup, index) => {
        sup.py = this.iconName[index]
      })
    },
    // 选中的配置
    selectOption(option) {
      const index = this.selectOpions.indexOf(option.label)
      index === -1
        ? this.selectOpions.push(option.label)
        : this.selectOpions.splice(index, 1)
      this.sendHouseInfo.supporting = this.selectOpions.join('|')
    },
    // 选择楼层\户型\朝向
    selectPop(item) {
      this.isShow = true
      this.selectPicker = item
    },
    // 楼层\户型\朝向取消与确认
    confirmPicker(item) {
      // this.isShow = false
      if (
        item.label === '一室' ||
        item.label === '二室' ||
        item.label === '三室' ||
        item.label === '四室' ||
        item.label === '四室+'
      ) {
        this.sendHouseInfo.roomType = item.value
        this.roomTypeName = item.label
      } else if (
        item.label === '高楼层' ||
        item.label === '中楼层' ||
        item.label === '低楼层'
      ) {
        this.sendHouseInfo.floor = item.value
        this.floorName = item.label
      } else {
        this.sendHouseInfo.oriented = item.value
        this.orientedName = item.label
      }
      this.isShow = false
    },
    // 提交按钮
    async confirmAdd() {
      // 判断图片并且上传获取地址
      if (this.imgsList.length > 0) {
        const form = new FormData()
        this.imgsList.forEach((item) => form.append('file', item.file))
        const res = await uploadImgsAPI(form)
        this.sendHouseInfo.houseImg = res.data.body.join('|')
        // 发布房源
        await publishHouseAPI(this.sendHouseInfo)
        this.$router.push('/rent')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.publish {
  background-color: #fff;
  // 标题
  .title {
    position: sticky;
    width: 100%;
    height: 45px;
    top: 0;
    left: 0;
    z-index: 10000;
    background-color: #f6f5f6;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #333;
    .van-icon {
      position: absolute;
      top: 15px;
      left: 15px;
      font-size: 16px;
    }
  }
  // 主体内容
  .main {
    margin: 0 10px;
    .areaName {
      width: 100%;
      height: 45px;
      border-bottom: 1px solid rgb(216, 213, 213);
      display: flex;
      justify-content: space-between;
      font-size: 15px;
      align-items: center;
      .name,
      .price {
        color: #333;
      }
      .input {
        color: #888;
      }
      input {
        height: 20px;
        width: 200px;
        border: none;
        &::placeholder {
          color: #999;
        }
        &:focus {
          color: #43b978;
        }
      }
    }
    .info {
      height: 40px;
      line-height: 40px;
      color: #43b978;
    }
    .direction {
      border-bottom: none;
    }
    .housetitle {
      height: 40px;
      line-height: 40px;
      font-size: 15px;
      color: #333;
      border-bottom: 1px solid rgb(216, 213, 213);
    }
    .titleInput {
      border-bottom: none;
      height: 20px;
      width: 100%;
      border: none;
      text-indent: 0.2em;
      margin: 15px 0;
      &::placeholder {
        color: #999;
      }
      &:focus {
        color: #43b978;
      }
    }
    .van-uploader {
      margin: 10px 0;
      .van-button {
        width: 83px;
        height: 83px;
      }
    }
    .more {
      display: flex;
      flex-wrap: wrap;
      justify-content: start;
      margin-top: 5px;
      .iconfontName {
        width: 70px;
        height: 71px;
        font-size: 14px;
        color: #333;
        padding: 5px 0;
        text-align: center;
        .iconfont {
          font-size: 20px;
        }
        p {
          margin-top: 7px;
        }
      }
      .active {
        color: #43b978;
      }
    }
    textarea {
      margin-top: 10px;
      width: 100%;
      border: none;
      font-size: 15px;
      white-space: pre-wrap;
      resize: none;
      &::placeholder {
        color: #999;
      }
      &:focus {
        color: #43b978;
      }
    }
  }
  // 取消与确认
  .eareConfirm {
    position: sticky;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 45px;
    display: flex;
    font-size: 16px;
    color: #fff;
    .confirm {
      width: 60%;
      background-color: #43b978;
      border: none;
    }
    .concel {
      flex: 1;
      border: none;
      font-size: #333;
    }
  }
}
</style>
